<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI面试官 - 面试报告</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/boxicons@2.0.7/css/boxicons.min.css" rel="stylesheet">
    <link href="/static/css/style.css" rel="stylesheet">
    <link href="/static/css/dashboard.css" rel="stylesheet">
    <link href="/static/css/candidate/reports.css" rel="stylesheet">
</head>
<body class="dashboard-page">
    <div class="dashboard-container">
        <!-- 侧边栏 -->
        <nav id="sidebar">
            <div class="sidebar-header">
                <div class="logo">
                    <i class='bx bx-bot'></i>
                    <span>AI面试官</span>
                </div>
            </div>
            <ul class="nav-links">
                <li class="active">
                    <a href="/applicant/dashboard">
                        <i class='bx bxs-dashboard'></i>
                        <span>控制台</span>
                    </a>
                </li>

                <li>
                    <a href="/applicant/interview">
                        <i class='bx bx-video'></i>
                        <span>面试中心</span>
                    </a>
                </li>
                <li>
                    <a href="#" data-bs-toggle="collapse" data-bs-target="#resumeMenu" aria-expanded="false" aria-controls="resumeMenu">
                        <i class='bx bx-file'></i>
                        <span>简历中心</span>
                        <i class='bx bx-chevron-down'></i> <!-- 添加展开图标 -->
                    </a>
                    <ul class="collapse" id="resumeMenu">
                        <li>
                            <a href="/applicant/resume">
                                <i class='bx bx-file'></i>
                                <span>简历上传</span>
                            </a>
                        </li>
                        <li>
                            <a href="/applicant/analyze_resume">
                                <i class='bx bx-file'></i>
                                <span>简历分析</span>
                            </a>
                        </li>
                        <li>
                            <a href="/applicant/upload_resume">
                                <i class='bx bx-file'></i>
                                <span>投递简历</span>
                            </a>
                        </li>
                        <li>
                            <a href="/applicant/resume_manage">
                                <i class='bx bx-file'></i>
                                <span>简历管理</span>
                            </a>
                        </li>
                    </ul>
                </li>




            </ul>
        </nav>

        <!-- 主要内容区域 -->
        <main class="main-content">
            <div class="report-container">
                <!-- 报告头部 -->
                <div class="report-header">
                    <div class="header-content">
                        <h1>面试报告详情</h1>
                        <div class="report-meta">
                            <span>字节跳动 - 前端开发工程师</span>
                            <span>2024-03-15 14:30</span>
                        </div>
                    </div>
                    <button class="btn btn-primary" onclick="exportPDF()">
                        <i class='bx bx-download'></i>
                        导出PDF
                    </button>
                </div>

                <!-- 总体评分 -->
                <div class="score-overview">
                    <div class="score-card">
                        <div class="score-value">85</div>
                        <div class="score-label">总体评分</div>
                    </div>
                    <div class="score-details">
                        <div class="detail-item">
                            <div class="detail-value">45分钟</div>
                            <div class="detail-label">面试时长</div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-value">12个</div>
                            <div class="detail-label">问题数量</div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-value">92%</div>
                            <div class="detail-label">回答完整度</div>
                        </div>
                    </div>
                </div>

                <!-- 表现评估 -->
                <div class="assessment-section">
                    <div class="strengths">
                        <h2>表现亮点</h2>
                        <ul>
                            <li>技术知识储备扎实</li>
                            <li>问题解决能力强</li>
                            <li>沟通表达清晰</li>
                        </ul>
                    </div>
                    <div class="improvements">
                        <h2>改进建议</h2>
                        <ul>
                            <li>可以进一步加强算法知识</li>
                            <li>建议补充多实战项目经验</li>
                        </ul>
                    </div>
                </div>

                <!-- 问答记录 -->
                <div class="qa-section">
                    <h2>问答记录</h2>
                    <div class="qa-list">
                        <div class="qa-item">
                            <div class="question">
                                <div class="q-header">
                                    <span class="q-label">Q1</span>
                                    <span class="q-score">90分</span>
                                </div>
                                <p>请详细讲解一下Vue的响应式原理？</p>
                            </div>
                            <div class="answer">
                                <p>Vue2使用Object.defineProperty实现数据劫持，主要包括以下几个步骤：</p>
                                <ol>
                                    <li>初始化时遍历data中的所有属性</li>
                                    <li>使用Object.defineProperty转换为getter/setter</li>
                                    <li>在getter中收集依赖</li>
                                    <li>在setter中通知更新</li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="/static/js/reports.js"></script>
</body>
</html> 